<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <table id="tb">
        <title></title>
    </table>

    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./config/url.js"></script>
    <script src="./js/api.js"></script>
    <script>
        
        $(function () {
            let id = window.location.search.split('=')[1];
            let tb = $('#tb');
            let h;

            if (id) {
                getDataById(id).then((res) => {
                    h = `
                    <tr>
                        <th>添加博客或者修改</th>
                    </tr>
                    <tr>
                        <td>标题</td>
                        <td><input type="text" value="${res.title}" class="title"></td>
                    </tr>
                    <tr>
                        <td>摘要</td>
                        <td><input type="text" value="${res.digest}" class="digest"></td>
                    </tr>
                    <tr>
                        <td>内容</td>
                        <td><input type="text" value="${res.content}" class="content"></td>
                    </tr>
                    <tr>
                        <td>分类</td>
                        <td><input type="text" value="${res.variety}" class="variety"></td>
                    </tr>
                    <tr>
                        <td>作者</td>
                        <td><input type="text" value="${res.author}" class="author"></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" value="保存" onclick="save()">
                        </td>
                        <td>
                            <input type="button" value="取消" onclick="cencel()">
                        </td>
                    </tr>
                    `
                    tb.append(h);
                })
            } else {
                h = `
                <tr>
                    <th>添加博客或者修改</th>
                </tr>
                <tr>
                    <td>标题</td>
                    <td><input type="text" class="title"></td>
                </tr>
                <tr>
                    <td>摘要</td>
                    <td><input type="text" class="digest"></td>
                </tr>
                <tr>
                    <td>内容</td>
                    <td><input type="text" class="content"></td>
                </tr>
                <tr>
                    <td>分类</td>
                    <td><input type="text" class="variety"></td>
                </tr>
                <tr>
                    <td>作者</td>
                    <td><input type="text" class="author"></td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="保存" onclick="save()">
                    </td>
                    <td>
                        <input type="button" value="取消" onclick="cencel()">
                    </td>
                </tr>
                `
                tb.append(h);
            }

        })

        
        function save() {
            let id = window.location.search.split('=')[1];
            let title = $('.title').val();
            let digest = $('.digest').val();
            let content = $('.content').val();
            let variety = $('.variety').val();
            let author = $('.author').val();

            let obj = {
                title,
                digest,
                content,
                variety,
                author
            }

            if (id) {
                updateData(id, obj).then(() => {
                    window.location.href = './index.html'
                })
            } else {
                addData(obj).then(() => {
                    window.location.href = './index.html'

                })
            }
        }
        function cencel() {
            window.location.href = './index.html'

        }
    </script>
</body>

</html>